<template>
  <!-- 3向量点乘、叉乘/2css动画练习 -->
  <div class="main">
    <div class="fish"></div>
    <div class="eyes"></div>
    <div class="pages"></div>
  </div>
</template>
<script setup>
import { onMounted } from "vue";

onMounted(() => {});
</script>
<style scoped lang="less">
.main {
  width: 600px;
  height: 400px;
  background: rgb(239, 218, 218);
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  .fish {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 50px 0 0 40px;
    border: 1px red solid;
    border-radius: 50%;
    overflow: hidden;

    z-index: 2;
  }
  .fish::before {
    content: "11";
    display: block;
    height: 100px;
    width: 200px;
    background: red;
    transform-origin: bottom center;
    animation: rotate1 0.4s ease infinite alternate;
  }
  .fish::after {
    content: "";
    display: block;
    height: 100px;
    width: 200px;
    background: red;
    transform-origin: top center;
    animation: rotate2 0.4s ease infinite alternate;
  }
  .eyes {
    width: 15px;
    height: 15px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #000;
    position: absolute;
    top: 85px;
    left: 140px;
    z-index: 2;
  }
  .pages {
    width: 40px;
    height: 40px;
    background: rgb(246, 112, 9);
    border-radius: 50%;
    position: absolute;
    top: 130px;
    left: 170px;
    box-shadow: 70px 0 0 rgb(246, 112, 9), 140px 0 0 rgb(246, 112, 9),
      210px 0 0 rgb(246, 112, 9), 280px 0 0 rgb(246, 112, 9),
      350px 0 0 rgb(246, 112, 9);
    animation: move 0.8s ease infinite;
  }
  @keyframes rotate1 {
    0% {
      rotate: 0deg;
    }
    100% {
      rotate: -30deg;
    }
  }
  @keyframes rotate2 {
    0% {
      rotate: 0deg;
    }
    100% {
      rotate: 30deg;
    }
  }
  @keyframes move {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-70px);
    }
  }
}
</style>